@import '../../style/themes/index';
@import '../../style/mixins/index';

@prefixCls: ~'@{line-style-prefix}-image';
@zindex-preview-mask: 1000;
@preview-mask-bg: fade(#000, 40%);
@text-color: #bbb;
@text-color-disabled: darken(@text-color, 30%);
@background-color: #f3f3f3;

.reset() {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box() {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.@{prefixCls} {
  display: inline-block;
  position: relative;
  &-img {
    width: 100%;
    height: auto;
    &-placeholder {
      background-color: @background-color;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url();
    }
  }

  &-placeholder {
    .box();
  }

  &-preview {
    text-align: center;
    height: 100%;
    pointer-events: none;

    &-body {
      .box();
      overflow: hidden;
    }

    &.zoom-enter,
    &.zoom-appear {
      transform: none;
      opacity: 0;
      animation-duration: 0.3s;
    }

    &-mask {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zindex-preview-mask;
      height: 100%;
      background-color: @preview-mask-bg;
      filter: ~'alpha(opacity=50)';

      &-hidden {
        display: none;
      }
    }

    &-img {
      cursor: grab;
      transform: scale3d(1, 1, 1);
      transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
      user-select: none;
      vertical-align: middle;
      max-width: 100%;
      max-height: 100%;
      pointer-events: auto;
      &-wrapper {
        .box();
        transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
        &::before {
          content: '';
          display: inline-block;
          height: 50%;
          width: 1px;
          margin-right: -1px;
        }
      }
    }

    &-moving {
      .@{prefixCls}-preview-img {
        cursor: grabbing;
        &-wrapper {
          transition-duration: 0s;
        }
      }
    }

    &-wrap {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zindex-preview-mask;
      overflow: auto;
      outline: 0;
      -webkit-overflow-scrolling: touch;
    }

    &-operations {
      .reset();
      pointer-events: auto;
      list-style: none;
      position: absolute;
      display: flex;
      top: 0;
      right: 0;
      width: 100%;
      align-items: center;
      flex-direction: row-reverse;
      z-index: 1;
      color: @text-color;
      background: fade(@preview-mask-bg, 45%);

      &-operation {
        padding: 10px;
        cursor: pointer;
        margin-left: 10px;
        &-disabled {
          pointer-events: none;
          color: @text-color-disabled;
        }
        &:last-of-type {
          margin-left: 0;
        }
      }
      &-icon {
        font-size: 18px;
      }
    }

    &-switch-left {
      position: absolute;
      left: 10px;
      top: 50%;
      width: 44px;
      height: 44px;
      margin-top: -22px;
      background: fade(@text-color, 45%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      pointer-events: auto;
      color: @text-color;
      &-disabled {
        background: fade(@text-color, 30%);
        color: @text-color-disabled;
        cursor: not-allowed;
        > .anticon {
          cursor: not-allowed;
        }
      }
      > .anticon {
        font-size: 24px;
      }
    }

    &-switch-right {
      position: absolute;
      right: 10px;
      top: 50%;
      width: 44px;
      height: 44px;
      margin-top: -22px;
      background: fade(@text-color, 45%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      pointer-events: auto;
      color: @text-color;
      &-disabled {
        background: fade(@text-color, 20%);
        color: @text-color-disabled;
        cursor: not-allowed;
        > .anticon {
          cursor: not-allowed;
        }
      }
      > .anticon {
        font-size: 24px;
      }
    }
  }
}

.fade-enter,
.fade-appear {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-play-state: paused;
  opacity: 0;
  animation-timing-function: linear;
}
.fade-leave {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-timing-function: linear;
}
.fade-enter.fade-enter-active,
.fade-appear.fade-appear-active {
  animation-name: rcImageFadeIn;
  animation-play-state: running;
}
.fade-leave.fade-leave-active {
  animation-name: rcImageFadeOut;
  animation-play-state: running;
  pointer-events: none;
}

@keyframes rcImageFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rcImageFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.zoom-enter,
.zoom-appear {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.zoom-leave {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.zoom-enter.zoom-enter-active,
.zoom-appear.zoom-appear-active {
  -webkit-animation-name: rcImageZoomIn;
  animation-name: rcImageZoomIn;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
.zoom-leave.zoom-leave-active {
  -webkit-animation-name: rcImageZoomOut;
  animation-name: rcImageZoomOut;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  pointer-events: none;
}

@keyframes rcImageZoomIn {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes rcImageZoomOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0;
  }
}
